<template>
  <div v-if="formData" class="home-container">
    <!-- <div class="header" v-if="!iswx">兴化市蟹有源溯源平台</div> -->
    <div class="cover">
      <img @click="imgClick" :src="formData.img" alt="" />
    </div>
    <div class="title">{{ formData.name }}</div>
    <div class="from">
      <div class="c-from">
        <span>您查询的溯源编号为：</span>
        <span>{{ formData.suyuanma }}</span>
      </div>
    </div>
    <div class="tab-wrap">
      <van-tabs @click-tab="onClickTab" color="#46cf89" v-model:active="active">
        <van-tab title="基本信息">
          <div>
            <div class="c-header">
              <div class="c-title">基本信息</div>
              <div class="driver"></div>
            </div>
            <div class="baseinfo">
              <div class="cell" v-if="formData.name">
                <span class="name">产品名称：</span>
                <span class="c-name">{{ formData.name }}</span>
              </div>
              <div class="cell" v-if="formData.pinpai">
                <span class="name">品&#8194;&#8194;&#8194;&#8194;牌：</span>
                <span class="c-name">{{ formData.pinpai }}</span>
              </div>
              <div class="cell" v-if="formData.compname">
                <span class="name">企业名称：</span>
                <span class="c-name">{{ formData.compname }}</span>
              </div>
              <div class="cell" v-if="formData.date">
                <span class="name">装箱日期：</span>
                <span class="c-name">{{ formData.date }}</span>
              </div>
              <div class="cell" v-if="formData.bzq">
                <span class="name">保&#8194;质&#8194;期：</span>
                <span class="c-name">{{ formData.bzq }}</span>
              </div>
              <div class="cell" v-if="formData.guige">
                <span class="name">规&#8194;&#8194;&#8194;&#8194;格：</span>
                <span class="c-name">{{ formData.guige }}</span>
              </div>
              <div class="cell" v-if="formData.shuliang">
                <span class="name">数&#8194;&#8194;&#8194;&#8194;量：</span>
                <span class="c-name">{{ formData.shuliang }}</span>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="溯源信息">
          <div class="c-header">
            <div class="c-title">溯源信息</div>
            <div class="driver"></div>
          </div>
          <div class="baseinfo">
            <van-steps active-color="#46cf89" direction="vertical" :active="0">
              <van-step v-for="(item, index) in suYuanDtos" :key="index">
                <h3>{{ item.ltName }}</h3>
                <p>{{ item.ltDate }}</p>
              </van-step>
            </van-steps>
            <div class="conformity">承诺达标合格证：</div>
            <div class="card">
              <div class="certification_left">
                <div class="certification_title">承诺达标合格证</div>
                <div class="certification_desc">
                  商品名称: {{ cardData.name }}
                </div>
                <div class="certification_desc">
                  重&#8194;&#8194;&#8194;&#8194;量: {{ cardData.sysum }}千克
                </div>
                <div class="certification_desc">
                  产&#8194;&#8194;&#8194;&#8194;地:
                  {{ cardData.comeaddress }}
                </div>
                <div class="certification_desc">
                  开具单位: {{ cardData.ytmarketnm }}
                </div>
                <div class="certification_desc">
                  联系方式: {{ cardData.jyhphone }}
                </div>
                <div class="certification_desc">
                  开具日期: {{ cardData.kjTimeStr }}
                </div>
                <qrcode-vue
                  class="qrcode"
                  :value="qrcodeUrl"
                  :size="70"
                  level="H"
                />
              </div>
              <div class="certification_right">
                <div class="promotion_title">我承诺对生产销售的食用农产品:</div>
                <div
                  class="promotion_desc1"
                  v-bind:key="index"
                  v-for="(item, index) in promotionList"
                >
                  <img
                    class="promotion_left"
                    src="../../assets/images/yes_certicifate.png"
                  />
                  {{ item.name }}
                </div>

                <div class="promotion_title" style="margin-top: 10px">
                  承诺依据
                </div>
                <div
                  class="promotion_desc"
                  v-bind:key="index"
                  v-for="(item, index) in promotionReason"
                >
                  <img
                    class="promotion_left"
                    v-if="selectedReason == index"
                    src="../../assets/images/yes_certicifate.png"
                  />
                  <img
                    class="promotion_left_unselect"
                    v-if="selectedReason != index"
                    src="../../assets/images/no_certicifate.png"
                  />
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="质检信息">
          <div class="c-header">
            <div class="c-title">质检信息</div>
            <div class="driver"></div>
          </div>
          <div v-if="zhiJianDtos.length > 0" class="baseinfo">
            <van-steps active-color="#46cf89" direction="vertical" :active="0">
              <van-step v-for="(item, index) in zhiJianDtos" :key="index">
                <h3>{{ item.jcdw }}</h3>
                <div class="zhijian">
                  <!-- <div class="cell1">
                    <span class="name">产品名称：</span>
                    <span class="c-name">{{item.jcdw}}</span>
                  </div> -->
                  <div class="cell1">
                    <span class="name">检测项目：</span>
                    <span class="c-name">{{ item.jcxm }}</span>
                  </div>
                  <div class="cell1">
                    <span class="name">检测结果：</span>
                    <span class="c-name">{{ item.jcjg }}</span>
                  </div>
                  <div class="cell1">
                    <span class="name">检测方式：</span>
                    <span class="c-name">{{ item.jcfs }}</span>
                  </div>
                  <div class="cell1">
                    <span class="name">检测时间：</span>
                    <span class="c-name">{{ item.jcsj }}</span>
                  </div>
                  <div class="cell1">
                    <span class="name">被检单位：</span>
                    <span class="c-name">{{ item.jcdw }}</span>
                  </div>
                  <div class="cell1">
                    <span class="name">检测机构：</span>
                    <span class="c-name">{{ item.jcedanw }}</span>
                  </div>
                </div>
              </van-step>
            </van-steps>
          </div>
          <van-empty v-else description="暂无质检信息" />
        </van-tab>
      </van-tabs>
    </div>
    <div class="foot">
      <img src="../../assets/image/crab1.png" alt="" />蟹有源
    </div>
    <div class="strick strick1" @click="handleRegister">
      <img src="../../assets/image/dengji.png" alt="" />
      购买登记
    </div>
    <div class="strick strick2" @click="handleComplaints">
      <img src="../../assets/image/tousu.png" alt="" />

      咨询投诉
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  getXYYCodeByJhId,
  getHGZ,
  queryPromotions,
  queryPromotion1,
} from "../../apis/home";
import { useRouter } from "vue-router";
import QrcodeVue from "qrcode.vue";
const formData = ref();
const active = ref(0);
const cardData = ref();
const suYuanDtos = ref([]);
const zhiJianDtos = ref([]);
const router = useRouter();
const conformity = ref();
const qrcodeUrl = ref();
const promotionReason = ref([]);
const promotionList = ref([]);
const selectedReason = ref();
const iswx = ref();
const getInfo = async () => {
  var ua = window.navigator.userAgent.toLowerCase();
  console.log(ua);

  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    //return true
    console.log("66666");
    iswx.value = true;
  } else {
    iswx.value = false;
  }

  await queryPromotions().then((res) => {
    if (res.code == 0) {
      promotionList.value = res.data;
    }
  });
  await queryPromotion1().then((res) => {
    if (res.code == 0) {
      promotionReason.value = res.data;
    }
  });
  await getXYYCodeByJhId().then((res) => {
    formData.value = res.data;
    localStorage.setItem("formData", JSON.stringify(res.data));
    suYuanDtos.value = res.data.suYuanDtos.reverse();
    zhiJianDtos.value = res.data.zhiJianDtos;
  });
  await getHGZ().then((res) => {
    conformity.value = res.data.hgzbh;
    cardData.value = res.data;
    qrcodeUrl.value =
      "https://newh5qct.yskjtz.com/#/pages/checkcertification/checkcertification?id=" +
      res.data.id;
    if (res.data.zkfsnm == "自主承诺") {
      selectedReason.value = 0;
    } else if (res.data.zkfsnm == "企业自检") {
      selectedReason.value = 1;
    } else {
      selectedReason.value = 2;
    }
  });
};
getInfo();

const onClickTab = (item) => {
  active.value = item.name;
};
const imgClick = () => {
  showImagePreview([formData.value.img]);
};
const handleRegister = () => {
  router.push("/register");
};
const handleComplaints = () => {
  router.push("/complaints");
};
</script>

<style lang="scss" scoped>
.home-container {
  background-color: #d9f2f7;

  .header {
    background-color: #46cf89;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
  }

  .title {
    height: 40px;
    text-align: center;
    font-size: 25px;
    color: #46cf89;
    font-weight: 600;
    font-family: serif;
  }

  .cover {
    padding: 20px 0 0 0;
    height: 190px;
    text-align: center;
    background-color: #d9f2f7;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .from {
    padding: 0 10px;

    .c-from {
      text-align: center;
      letter-spacing: 1px;
      font-size: 14px;
      border-radius: 10px;
      padding: 10px 15px;
      // background-color: #fff;
      // box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

      span:nth-child(1) {
        color: #828683;
      }

      span:nth-child(2) {
        color: #28af69;
      }
    }
  }
  :deep(.tab-wrap) {
    height: calc(100vh - 331px);
    padding: 10px;
    .van-tabs__wrap {
      border-radius: 15px;
    }
    .c-header {
      margin-top: 20px;
      display: flex;
      align-items: center;

      .c-title {
        border-left: 3px solid #46cf89;
        padding-left: 10px;
      }

      .driver {
        margin-left: 5px;
        flex: 1;
        border-bottom: 1px dashed #46cf89;
      }
    }

    .baseinfo {
      margin-top: 10px;
      background-color: #fff;
      padding: 10px 12px;
      border-radius: 10px;
      margin-bottom: 30px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      max-height: calc(100vh - 470px);
      overflow-y: scroll;
      font-size: 14px;
      // font-size: 0.9em;
      .cell {
        padding: 8px 0;

        .name {
          display: inline-block;
          color: #828683;
          width: 90px;
          text-align: right;
        }

        .c-name {
          margin-left: 15px;
          color: #59dc89;
        }
      }
    }
  }
  .foot {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    background-color: #46cf89;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 30px;
    }
  }
  .zhijian {
    .cell1 {
      font-size: 13px;
      .name {
        display: inline-block;
        color: #828683;
        width: 80px;
        text-align: right;
      }

      .c-name {
        margin-left: 15px;
        color: #59dc89;
      }
    }
  }
  .strick {
    padding: 5px;
    color: #179554;
    background: #caecb9;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 46px;
    height: 22px;
    display: flex;
    align-items: center;
    font-size: 9px;
    position: absolute;
    right: 0;
    bottom: 100px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    z-index: 99;
    img {
      width: 22px;
    }
  }
  .strick2 {
    bottom: 50px;
  }
  .conformity {
    font-size: 14px;
    padding: 10px 0 5px 30px;
    color: #6c6363d5;
  }
  .card {
    padding: 10px;
    display: flex;
    background-color: #76bc29;
    border-radius: 20px;
    .certification_left {
      padding: 8px;
      // font-size: 12px;
      font-size: 0.8em;
      width: 62%;
      background-image: url("../../assets/images/certicifate_bg.png");
      background-size: 100% 100%;
      background-position: cernter 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      .certification_title {
        font-size: 16px;
        font-weight: 600;
      }
      .qrcode {
        position: absolute;
        top: 10%;
        right: 10%;
      }
    }
    .certification_right {
      img {
        width: 10px;
      }
      font-size: 8px;
      margin-left: 5px;
      width: 32%;
      .promotion_title {
        color: #fff;
        font-size: 12px;
      }
      .promotion_desc {
        display: flex;
        align-items: center;
        img {
          margin-right: 3px;
        }
      }
      .promotion_desc1 {
        img {
          position: relative;
          top: 2px;
        }
      }
    }
  }
}
</style>
